<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点操作-子节点</title>
</head>

<body>
    <ul>
        <li>这是li</li>
        <li>这是li</li>
        <li>这是li</li>
        <li>这是li</li>
        <li>这是li</li>
    </ul>
    <div class="demo">
        <div class="box">
            <span class="er"></span>
        </div>
    </div>
    <script>
        // DOM 提供的方法 (api) 获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');

        // 1.操作子节点 childNodes 所有的子节点 包含 元素节点 文本节点（换行） 等
        console.log(ul.childNodes);

        console.log(ul.childNodes[1].nodeType);
        // 想要获取多个li 还得特殊处理 比较麻烦
        for (var i = 0; i < ul.childNodes.length; i++) {
            // console.log(ul.childNodes[i]);
            if (ul.childNodes[i].nodeType == 1) {
                // ul.childNodes[i]  是元素节点
                console.log(ul.childNodes[i]);

            }
        }



        // 2.children 获取所有的子元素节点  实际开发常用这个
        console.log(ul.children);
    </script>
</body>

</html>